<script setup>
import {ref} from "vue"
import golang_start_1 from "./golang_start_1.png"
import myShowDM from "../../../../components/myShowDM.vue"

const typeGo = ref("golang")
const num1 = ref(0)
const num2 = ref(0)

//父组件监听
const changNumBtn1 = async(params) => {
    // console.log('父组件:',params)
    num1.value = params.params1
}
const changNumBtn2 = async(params) => {
    num2.value = params.params1
}

</script>

<template>
    <div>
        <h2>请开始你的golang语言</h2>
        <a href="https://golang.google.cn/learn/" class="gotogolangLink">go下载地址</a>
        <h2>下载后设置环境变量</h2>
        <img :src="golang_start_1" alt="" class="go_start_image_1"/>
        <p>此环境变量依据你的golang安装目录来定的</p>
        <h2>{{ "你的第一个golang程序--Hello World" }}</h2>
        <div class="codeMessage1">
            <myShowDM 
            :type="typeGo"
            :num="num1"
            @changNum="changNumBtn1">
            <template v-slot:slot1>
                <div class="message1DetailBox" v-if="num1 == 0">]
                    <div class="line1">{{ "//注意:运行程序请使用go run main.go" }}</div>
                    <div class="line1">{{ "package main" }}</div>
                    <div class="line1">{{ "import(" }}</div>
                    <div class="line2">{{ '"fmt"' }}</div>
                    <div class="line1">{{ ")" }}</div>
                    <div class="line1">{{ "func main(){" }}</div>
                    <div class="line2">{{ 'fmt.Println("hello world")' }}</div>
                    <div class="line1">{{ "}" }}</div>
                </div>
                <div class="message1DetailBox" v-if="num1 == 1">
                    <div class="line1">{{ "//出现go.mod你需要在power shell中执行go mod init 模块名" }}</div>
                    <div class="line1">{{ "module thread_test //模块名称(不一定一定要取这个名称)" }}</div>
                    <div class="line1"></div>
                    <div class="line1">{{ "go 1.21.0 //golang的版本(iris只有go1.21支持)" }}</div>
                </div>
            </template>

            <template v-slot:golangCommand>
                <div :style="{marginLeft:'10px'}">
                    <span :style="{color:'rgba(0, 200, 200, 1)'}">{{ "$" }}</span>
                    <span :style="{color:'#fff'}">{{ "my-go >" }}</span>
                    <span :style="{color:'#fff'}">{{ "go mod init thread_test" }}</span>
                </div>
                <div :style="{marginLeft:'10px',color:'#fff'}">
                    go: creating new go.mod: module thread_test
                    go: to add module requirements and sums:
                            go mod tidy
                </div>
                <div class="lineCommand">
                    <div class="commandName">
                        <div class="biaodian">$</div>
                        <div class="biaodianName">my-go ></div>
                    </div>
                    <div class="inputBoxCommand"> 
                        <!-- <input type="text" v-model="commandLineValue" ref="commandInputRef"/> -->
                        <p>{{ "go run main.go" }}</p>
                    </div>
                </div>
                <p class="go_result">{{ "hello world" }}</p>
                <div :style="{marginLeft:'10px'}"><span :style="{color:'rgba(0, 200, 200, 1)'}">{{ "$" }}</span><span :style="{color:'#fff'}">{{ "my-go >" }}</span></div>
            </template>
        </myShowDM>
        </div>
    </div>
</template>

<style scoped>
.gotogolangLink{
    color: rgb(0,125,156);
    border-bottom: 2px solid #fff;
}
.gotogolangLink:hover{
    border-bottom: 2px solid rgb(0,125,156);
}
.go_start_image_1{
    margin-top: 10px;
    width: 700px;
    height: 400px;
}

.codeMessage1{
    width: 800px;
    height: 400px;
    background-color: black;
}
.lineCommand{
    display: flex;
}
.commandName{
    margin-left: 10px;
    display: flex;
    color: #fff;
}
.biaodian{
    color: rgba(0, 200, 200, 1);
}
.inputBoxCommand{
    position: relative;
    left: 0;
    width:55%;
    height: 50%;
    border: none;
    outline: none;
    background: none;
}
.inputBoxCommand p{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: none;
    caret-color:#fff;/**修改光标颜色 */
    color: #fff;/**修改字体颜色 */
    font-size: 15px;
}
.inputBoxCommand input{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: none;
    caret-color:#fff;/**修改光标颜色 */
    color: #fff;/**修改字体颜色 */
    font-size: 15px;
}
.line1{
    position: relative;
    left: 0px;
    top: 0;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    color: #ffff;
}
.line2{
    position: relative;
    left: 4%;
    top: 0;
    width: 96%;
    height: 10%;
    display: flex;
    align-items: center;
    color: #ffff;
}
.line3{
    position: relative;
    left: 8%;
    top: 0;
    width: 92%;
    height: 10%;
    display: flex;
    align-items: center;
    color: #ffff;
}
.line4{
    position: relative;
    left: 12%;
    top: 0;
    width: 92%;
    height: 10%;
    display: flex;
    align-items: center;
    color: #ffff;
}
.message1DetailBox{
    width: 100%;
    height: 100%;
}
.go_result{
    margin-top: 10px;
    margin-left: 30px;
    color: #fff;
}
</style>